<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test01</title>
    <script src="https://unpkg.com/vue/dist/vue.js" type="text/javascript"></script>
</head>
<body>

<div id="app">
    <!--    <ul>-->
    <!--        <li v-for="item in items">{{item}}</li>-->
    <!--    </ul>-->

    <!--    <ul>-->
    <!--        <li v-for="(item,index) in items">{{index}} : {{item}}</li>-->
    <!--    </ul>-->

    <!--    <ul>-->
    <!--        <li v-for="val in student">{{val}}</li>-->
    <!--    </ul>-->

    <ul>
        <li v-for="(val,key) in student">{{key}} : {{val}}</li>
    </ul>

    <!--    <ul>-->
    <!--        <li v-for="(val,key,index) in student">{{index}} : {{key}} : {{val}}</li>-->
    <!--    </ul>-->

    <!--    <ul>-->
    <!--        <template v-for="(val,key,index) in student">-->
    <!--            <span style="color: red">{{index}} : </span>-->
    <!--            <li>{{key}} : {{val}}</li>-->
    <!--        </template>-->
    <!--    </ul>-->

    <!--    <ul>-->
    <!--        <li v-for="item in arr" v-if="item % 2 == 0">{{item}}</li>-->
    <!--    </ul>-->

    <br/>
    <button @click="clickme()">Click me</button>
</div>

<script>
    let vm = new Vue({
        el: '#app',
        data: {
            items: ['a', 'b', 'c'],
            arr: [1, 2, 3, 4, 5, 6, 7, 8],
            student: {
                name: 'zhangsan',
                age: 18,
                addr: 'xxx-yyy-zzz'
            }
        },
        methods: {
            clickme: function () {
                // this.items.push('d');
                // this.items = this.items.concat(['d','e','f']);

                // this.items[0] = 'aa';

                // this.items.splice(0, 1, 'aa', 'bb', 'cc');

                // Vue.set(this.items, 0, 'aa');

                // console.log(this.items);

                // this.student.grade = 88;
                // delete this.student.addr;

                // let student01 = Object.assign({}, this.student, {
                //     grade: 88
                // });
                //
                // this.student = student01;

                // Vue.set(this.student, 'grade', 88);
                Vue.delete(this.student, 'addr');

                console.log(this.student);
                // console.log(student01);
            }
        }
    });

</script>

</body>
</html>